<template>
	<view class="income">
		<view class="card">
			<image class="bgImg" src="/static/incomeBg.png" mode="aspectFill"></image>
			<view class="content">
				<view class="total">
					<view class="number">{{total_income}}</view>
					<view class="label">总收益/元</view>
				</view>
				<view class="part flex_conter mTop3">
					<view class="item group">
						<view class="number"><text>{{pintuan_income}}</text>元</view>
						<view class="label">拼团总收益</view>
					</view>
					<view class="item share">
						<view class="number"><text>{{share_income}}</text>元</view>
						<view class="label">分享总收益</view>
					</view>
					<view class="item">
						<view class="number"><text>{{hhr_income}}</text>元</view>
						<view class="label">分红收益</view>
					</view>
				</view>
			</view>
		</view>
		
		<view class="titleBox">
			<view class="title">今日收益</view>
		</view>
		
		<view class="today">
			<view class="total">
				<image class="bgImg" src="/static/incomeBg2.png" mode="aspectFill"></image>
				<view class="con">
					<view class="number">{{today_total_income}}</view>
					<view class="label">总收益/元</view>
				</view>
			</view>
			<view class="part flex_space_a">
				<view class="item group">
					<view class="number">{{today_pintuan_income}}</view>
					<view class="label">拼团收益</view>
				</view>
				<view class="item share">
					<view class="number">{{today_share_income}}</view>
					<view class="label">分享收益</view>
				</view>
				<view class="item group">
					<view class="number">{{today_hhr_income}}</view>
					<view class="label">分红收益</view>
				</view>
			</view>
		</view>
		
		<view class="titleBox">
			<view class="title">本月收益</view>
		</view>
		
		<view class="today">
			<view class="total">
				<image class="bgImg" src="/static/incomeBg2.png" mode="aspectFill"></image>
				<view class="con">
					<view class="number">{{this_month_total_income}}</view>
					<view class="label">总收益/元</view>
				</view>
			</view>
			<view class="part flex_space_a">
				<view class="item group">
					<view class="number">{{this_month_pintuan_income}}</view>
					<view class="label">拼团收益</view>
				</view>
				<view class="item share">
					<view class="number">{{this_month_share_income}}</view>
					<view class="label">分享收益</view>
				</view>
				<view class="item group">
					<view class="number">{{this_month_hhr_income}}</view>
					<view class="label">分红收益</view>
				</view>
			</view>
		</view>
		
		<view class="titleBox">
			<view class="title">上月收益</view>
		</view>
		
		<view class="today">
			<view class="total">
				<image class="bgImg" src="/static/incomeBg2.png" mode="aspectFill"></image>
				<view class="con">
					<view class="number">{{last_month_total_income}}</view>
					<view class="label">总收益/元</view>
				</view>
			</view>
			<view class="part flex_space_a">
				<view class="item group">
					<view class="number">{{last_month_pintuan_income}}</view>
					<view class="label">拼团收益</view>
				</view>
				<view class="item share">
					<view class="number">{{last_month_share_income}}</view>
					<view class="label">分享收益</view>
				</view>
				<view class="item group">
					<view class="number">{{last_month_hhr_income}}</view>
					<view class="label">分红收益</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	var util = require('../../common/util.js');
	export default {
		data() {
			return {
				total_income:0.0,
				pintuan_income:0.0,
				hhr_income:0.0,
				share_income:0.0,
				today_total_income:0.0,
				today_pintuan_income:0.0,
				today_hhr_income:0.0,
				today_share_income:0.0,
				this_month_total_income:0.0,
				this_month_pintuan_income:0.0,
				this_month_hhr_income:0.0,
				this_month_share_income:0.0,
				last_month_total_income:0.0,
				last_month_pintuan_income:0.0,
				last_month_hhr_income:0.0,
				last_month_share_income:0.0
			}
		},
		onLoad(options) {
			this.loadData();
		},
		methods: {
			loadData: function(){
				// 加载数据
				var that = this;
				util.requestPost("api.php/user/userIncome", {}, function(res) {
					that.total_income = res.data.total_income;
					that.pintuan_income = res.data.pintuan_income;
					that.hhr_income = res.data.hhr_income;
					that.share_income = res.data.share_income;
					that.today_total_income = res.data.today_total_income;
					that.today_pintuan_income = res.data.today_pintuan_income;
					that.today_hhr_income = res.data.today_hhr_income;
					that.today_share_income = res.data.today_share_income;
					that.this_month_total_income = res.data.this_month_total_income;
					that.this_month_pintuan_income = res.data.this_month_pintuan_income;
					that.this_month_hhr_income = res.data.this_month_hhr_income;
					that.this_month_share_income = res.data.this_month_share_income;
					that.last_month_total_income = res.data.last_month_total_income;
					that.last_month_pintuan_income = res.data.last_month_pintuan_income;
					that.last_month_hhr_income = res.data.last_month_hhr_income;
					that.last_month_share_income = res.data.last_month_share_income;
				});
			}
		}
	}
</script>

<style scoped>
.income {
	min-height: 100%;
	background-color: var(--bgColor);
	padding: 30rpx;
}
.card {
	position: relative;
	padding: 60rpx 0;
	border-radius: 12rpx;
	overflow: hidden;
	color: #FFFFFF;
}
.card .content {
	position: relative;
	z-index: 2;
}
.card .total {
	text-align: center;
}
.card .total .number {
	font-size: 40rpx;
	margin-bottom: 8rpx;
}
.card .part {
	font-size: 24rpx;
}
.card .part .item {
	flex: 1;
	text-align: center;
}
.card .part .item .number {
    margin-bottom: 4rpx;
}
.card .part .item .number text {
	font-size: 32rpx;
}

.titleBox {
	padding: 20rpx 0;
}
.titleBox .title {
	font-size: 28rpx;
	font-weight: 600;
}

.today {
	border-radius: 12rpx;
	background-color: #FFFFFF;
	padding: 4rpx;
	box-shadow: 0 0 8rpx rgba(0, 0, 0, 0.1);
}
.today .total {
	/* background-color: var(--primaryColor); */
	text-align: center;
	padding: 24rpx 0;
	border-radius: 8rpx 8rpx 0 0;
	color: #FFFFFF;
	position: relative;
	overflow: hidden;
}
.today .total .con {
	position: relative;
	z-index: 1;
}
.today .total .number {
	font-size: 40rpx;
	margin-bottom: 8rpx;
}
/* .today .total .label {
	color: #888;
} */
.today .part {
	font-size: 24rpx;
}
.today .part .item {
	flex: 1;
	text-align: center;
	padding: 24rpx 0;
}
.today .part .item:nth-of-type(2) {
	border-right: 1rpx solid #EEEEEE;
	border-left: 1rpx solid #EEEEEE;
}
.today .part .item .number {
	font-size: 32rpx;
	margin-bottom: 4rpx;
}
.today .part .item .label {
	color: #888;
}
</style>
